<template>
  <div class="page">
    <div :class="'page-bg ' + (type == 2 ? 'short' : '')">
      <div class="page4">
        <div class="page-title">
          督办监控
        </div>
        <div class="page-content">
          <div class="echarts">
            <div class="legend">工单总量</div>
            <div id="echarts04"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
let zoomstart = 0,
  zoomend = 100;
import { echartsConfig } from "@/common/echartsConfig.js";
import requst from "@/api/api";

export default {
  name: "page4",
  components: {},
  props: {
    type: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      chartData: {},
      timer: null,
    };
  },
  async mounted() {
    const {
      data: { data },
    } = await requst.get("/api/1/page/4", {});
    this.chartData = data;
    this.getEcharts();
  },
  methods: {
    getEcharts() {
      const xAxisData = this.chartData.COMPANYNAME;
      const GZ = this.chartData.GZ;
      const SS = this.chartData.SS;
      const CQ = this.chartData.CQ;
      const TOTAL = this.chartData.TOTAL;

      let param = {
        xAxisData: xAxisData,
        yAxisData_1: TOTAL,
        yAxisData_2: TOTAL,
        yAxisData_3: TOTAL,
        yAxisData_4: GZ,
        yAxisData_5: SS,
        yAxisData_6: CQ,
      };

      this.echarts01(param);
      this.timer = setInterval(() => {
        this.echarts01(param);
      }, 2000);
    },
    echarts01(echart) {
      let that = this;
      let emptyColor = "#3559A4";
      let myChart = that.$echarts.init(document.getElementById("echarts04"));
      let option = {
        legend: {
          ...echartsConfig.legend,
          data: ["挂账类", "申诉类", "超期"],
        },
        title: {
          ...echartsConfig.title,
          text: "工单总量 (单）",
        },
        grid: {
          ...echartsConfig.grid,
          bottom: that.type == 1 ? 60 : 200,
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 32,
          },
          borderRadius: 8,
          borderColor: "rgba(88, 206, 255, 0.7)",
          borderWidth: 2,
          backgroundColor: "rgba(10, 29, 88, 0.8)",
          padding: 24,
        },
        yAxis: [
          {
            ...echartsConfig.yAxis,
          },
        ],
        dataZoom: [
          {
            type: "slider",
            show: false,
            start: that.zoomStart(),
            end: that.zoomEnd(echart.xAxisData.length),
            xAxisIndex: [0, 1],
          },
        ],
        xAxis: [
          {
            ...echartsConfig.xAxis,
            data: echart.xAxisData,
            axisLabel: {
              interval: 0,
              margin: 22,
              color: "rgba(255,255,255,1)",
              fontSize: 32,
              formatter: function(data) {
                if (data.length > 4) {
                  return data.substr(0, 4) + "...";
                } else {
                  return data;
                }
              },
            },
          },
          {
            type: "category",
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            data: echart.xAxisData,
          },
        ],
        series: [
          {
            type: "bar",
            xAxisIndex: 1,
            zlevel: 1,
            itemStyle: {
              normal: {
                color: emptyColor,
              },
            },
            barWidth: 24,
            data: echart.yAxisData_1,
          },
          {
            type: "bar",
            xAxisIndex: 1,
            barGap: "50%",
            data: echart.yAxisData_2,
            zlevel: 1,
            barWidth: 24,
            itemStyle: {
              normal: {
                color: emptyColor,
              },
            },
          },
          {
            type: "bar",
            xAxisIndex: 1,
            barGap: "50%",
            data: echart.yAxisData_3,
            zlevel: 1,
            barWidth: 24,
            itemStyle: {
              normal: {
                color: emptyColor,
              },
            },
          },
          {
            name: "挂账类",
            type: "bar",
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#4394FF" },
                  { offset: 1, color: "#7EEFFF" },
                ]),
                barBorderRadius: 4,
              },
            },
            zlevel: 2,
            barWidth: 24,
            data: echart.yAxisData_4,
          },
          {
            name: "申诉类",
            type: "bar",
            barWidth: 24,
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFCAFC" },
                  { offset: 1, color: "#8D50E0" },
                ]),
                barBorderRadius: 4,
              },
            },
            zlevel: 2,
            barGap: "50%",
            data: echart.yAxisData_5,
          },
          {
            name: "超期",
            type: "bar",
            barWidth: 24,
            itemStyle: {
              normal: {
                show: true,
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: "#FFD993" },
                  { offset: 1, color: "#FF7D61" },
                ]),
                barBorderRadius: 4,
              },
            },
            zlevel: 2,
            barGap: "50%",
            data: echart.yAxisData_6,
          },
        ],
      };
      myChart.setOption(option, true);
      // myChart.on("mouseover", this.myChartOver);
      // myChart.on("mouseout", this.myChartOut);
    },
    // myChartOver(){
    //   clearInterval(this.timer)
    // },
    // myChartOut(){
    //   this.getEcharts()
    // },
    zoomStart() {
      if (zoomend >= 100) {
        zoomstart = 0;
      } else {
        zoomstart += 10;
      }
      return zoomstart;
    },
    zoomEnd(length) {
      var displayNum = 7;
      if (length > displayNum && zoomstart === 0) {
        zoomend = (displayNum / length) * 100;
      } else if (length > displayNum) {
        zoomend += 10;
      } else {
        zoomend = 100;
        clearInterval(this.timer);
      }
      return zoomend;
    },
  },
};
</script>
<style lang="scss" scoped>
.page4 {
  .page-content {
    .echarts {
      position: relative;
      width: 1824rem;
      height: 820rem;
      #echarts04 {
        width: 1824rem;
        height: 820rem;
      }

      .legend {
        position: absolute;
        right: 8%;
        top: 80rem;
        font-size: 32rem;
        font-weight: 400;
        color: #ffffff;
        &:before {
          content: "";
          width: 32rem;
          height: 20rem;
          display: inline-block;
          margin-right: 10rem;
          background: #3559a4;
        }
      }
    }
  }
}
</style>
